<template>
  <div>
    <div class="item">
      <h4>分工情况</h4>
      <a-table
        :pagination="false"
        :columns="workColumns"
        :data-source="workData"
      >
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> 姓名</span>
        <span slot="tags" slot-scope="tags">
          <a-tag color="geekblue">
            {{ tags }}
          </a-tag>
        </span>
      </a-table>
    </div>
    <div class="item">
      <h4>数据表结构</h4>
      <a-table
        :pagination="false"
        :columns="DataTableColumns"
        :data-source="DataTableData"
      >
        <div slot="expandedRowRender" slot-scope="record">
          <a-table
            :pagination="false"
            :data-source="expandedRowRenders[record.key]"
            :columns="[
              {
                title: '字段名',
                dataIndex: 'name',
                key: 'name',
              },
              {
                title: '数据类型',
                dataIndex: 'type',
                key: 'type',
              },
              {
                title: '描述',
                dataIndex: 'desc',
                key: 'desc',
              },
            ]"
          >
          </a-table>
        </div>
      </a-table>
    </div>
    <div class="item">
      <h4>ER图</h4>
      <img
        :src="tableImg.url"
        :key="tableImg.title"
        :preview="tableImg.preview"
        :preview-text="tableImg.title"
      />
    </div>
    <div class="item">
      <h4>功能结构图</h4>
      <img
        :src="webImg.url"
        :key="webImg.title"
        :preview="webImg.preview"
        :preview-text="webImg.title"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      workColumns: [
        {
          dataIndex: "name",
          key: "name",
          slots: { title: "customTitle" },
          scopedSlots: { customRender: "name" },
          width: "10%",
        },
        {
          title: "班级",
          dataIndex: "clbum",
          key: "clbum",
        },
        {
          title: "学号",
          key: "tags",
          dataIndex: "tags",
          scopedSlots: { customRender: "tags" },
        },
        {
          title: "分工",
          key: "action",
          dataIndex: "action",
        },
      ],

      workData: [
        {
          key: "1",
          name: "林镇贤",
          clbum: "20软件技术(WEB前端开发方向)1班",
          tags: "20013325",
          action:
            "后台UI界面设计,网站配置模块,用户管理模块,添加文章,文章列表,分类管理,评论管理,工作情况分析",
        },
        {
          key: "2",
          name: "邱伟彬",
          clbum: "20软件技术(WEB前端开发方向)1班",
          tags: "20013331",
          action:
            "数据表设计,登录与注册,文章信息,关于页面,评论列表,订单详情,疫情页面,文章详情页",
        },
        {
          key: "3",
          name: "曾佳全",
          clbum: "20软件技术(WEB前端开发方向)1班",
          tags: "20013302",
          action:
            "首页静态页面,搜索页面,侧边栏界面,图片素材收集,图标组收集,网站logo设计,个人资料",
        },
      ],
      DataTableColumns: [
        { title: "表名", dataIndex: "name", key: "name" },
        { title: "字符集", dataIndex: "char", key: "char" },
        { title: "注释", dataIndex: "desc", key: "desc" },
      ],

      DataTableData: [
        {
          key: "article",
          name: "article",
          char: "utf8",
          desc: "文章列表",
        },
        {
          key: "category",
          name: "category",
          char: "utf8",
          desc: "分类列表",
        },
        {
          key: "comment",
          name: "comment",
          char: "utf8",
          desc: "评论列表",
        },
        {
          key: "hot",
          name: "hot",
          char: "utf8",
          desc: "热度文章",
        },
        {
          key: "log",
          name: "log",
          char: "utf8",
          desc: "网站日志",
        },
        {
          key: "users",
          name: "users",
          char: "utf8",
          desc: "用户列表",
        },
        {
          key: "website",
          name: "website",
          char: "utf8",
          desc: "网站日志",
        },
      ],
      expandedRowRenders: {
        article: [
          {
            key: "1",
            name: "id",
            type: "int(11)",
            desc: "文章ID",
          },
          {
            key: "2",
            name: "title",
            type: "varchar(255)",
            desc: "文章标题",
          },
          {
            key: "3",
            name: "content",
            type: "text",
            desc: "文章内容",
          },
          {
            key: "4",
            name: "category_id",
            type: "int(11)",
            desc: "分类ID",
          },
          {
            key: "5",
            name: "user_id",
            type: "int(11)",
            desc: "用户ID",
          },
          {
            key: "6",
            name: "created_at",
            type: "datetime",
            desc: "创建时间",
          },
          {
            key: "7",
            name: "updated_at",
            type: "datetime",
            desc: "更新时间",
          },
        ],
        category: [
          {
            key: "1",
            name: "id",
            type: "int(11)",
            desc: "分类ID",
          },
          {
            key: "2",
            name: "name",
            type: "varchar(255)",
            desc: "分类名称",
          },
          {
            key: "3",
            name: "created_at",
            type: "datetime",
            desc: "创建时间",
          },
          {
            key: "4",
            name: "updated_at",
            type: "datetime",
            desc: "更新时间",
          },
        ],
        comment: [
          {
            key: "1",
            name: "id",
            type: "int(11)",
            desc: "评论ID",
          },
          {
            key: "2",
            name: "article_id",
            type: "int(11)",
            desc: "文章ID",
          },
          {
            key: "3",
            name: "user_id",
            type: "int(11)",
            desc: "用户ID",
          },
          {
            key: "4",
            name: "content",
            type: "text",
            desc: "评论内容",
          },
          {
            key: "5",
            name: "created_at",
            type: "datetime",
            desc: "创建时间",
          },
          {
            key: "6",
            name: "updated_at",
            type: "datetime",
            desc: "更新时间",
          },
        ],
        hot: [
          {
            key: "1",
            name: "id",
            type: "int(11)",
            desc: "文章ID",
          },
          {
            key: "2",
            name: "title",
            type: "varchar(255)",
            desc: "文章标题",
          },
          {
            key: "3",
            name: "content",
            type: "text",
            desc: "文章内容",
          },
          {
            key: "4",
            name: "category_id",
            type: "int(11)",
            desc: "分类ID",
          },
          {
            key: "5",
            name: "user_id",
            type: "int(11)",
            desc: "用户ID",
          },
          {
            key: "6",
            name: "created_at",
            type: "datetime",
            desc: "创建时间",
          },
          {
            key: "7",
            name: "updated_at",
            type: "datetime",
            desc: "更新时间",
          },
        ],
        log: [
          {
            key: "1",
            name: "id",
            type: "int(11)",
            desc: "日志ID",
          },
          {
            key: "2",
            name: "user_id",
            type: "int(11)",
            desc: "用户ID",
          },
          {
            key: "3",
            name: "content",
            type: "text",
            desc: "日志内容",
          },
          {
            key: "4",
            name: "created_at",
            type: "datetime",
            desc: "创建时间",
          },
          {
            key: "5",
            name: "updated_at",
            type: "datetime",
            desc: "更新时间",
          },
        ],
        users: [
          {
            key: "1",
            name: "id",
            type: "int(11)",
            desc: "用户ID",
          },
          {
            key: "2",
            name: "name",
            type: "varchar(255)",
            desc: "用户名",
          },
          {
            key: "3",
            name: "password",
            type: "varchar(255)",
            desc: "密码",
          },
          {
            key: "4",
            name: "email",
            type: "varchar(255)",
            desc: "邮箱",
          },
          {
            key: "5",
            name: "created_at",
            type: "datetime",
            desc: "创建时间",
          },
          {
            key: "6",
            name: "updated_at",
            type: "datetime",
            desc: "更新时间",
          },
        ],
        website: [
          {
            key: "1",
            name: "id",
            type: "int(11)",
            desc: "网站ID",
          },
          {
            key: "2",
            name: "name",
            type: "varchar(255)",
            desc: "网站名称",
          },
          {
            key: "3",
            name: "url",
            type: "varchar(255)",
            desc: "网站地址",
          },
          {
            key: "4",
            name: "created_at",
            type: "datetime",
            desc: "创建时间",
          },
          {
            key: "5",
            name: "updated_at",
            type: "datetime",
            desc: "更新时间",
          },
        ],
      },
      tableImg: {
        url: require("@/assets/table.png"),
        title: "ER图",
        preview: "1",
      },
      webImg: {
        url: require("@/assets/web.png"),
        title: "功能结构图",
        preview: "1",
      },
    };
  },
};
</script>

<style scoped>
.webFlat {
  width: 500px;
  margin-left: 200px;
}
h4 {
  margin-bottom: 20px;
}
.item {
  margin: 40px 0;
}
.item img {
  height: 100px;
}
</style>
